import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    id: root
    tools: commonTools
    orientationLock: PageOrientation.LockPortrait

    signal connectToIp(string ip)

    Label {
        id: label
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 16
        text: qsTr("Select Device")
        platformStyle: LabelStyle {
            fontPixelSize: 40
        }
    }

    ListView {
        id: devicesView

        anchors {
            top: label.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            rightMargin: 16
            leftMargin: 16
            topMargin: 16
        }

        model: appWindow.devices
        clip: true
        spacing: 10

        delegate: Rectangle {
            id: delegate
            width: ListView.view.width
            height: 80
            color: delegateMouseArea.containsMouse ? "lightgray" : "transparent"
            radius: 10
            smooth: true

            Behavior on color {
                ColorAnimation { }
            }

            Label {
                id: nameLabel
                text: model.name
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.margins: 6
                platformStyle: LabelStyle {
                    fontPixelSize: 30
                }
            }

            Label {
                id: ipLabel
                text: model.ip
                anchors.top: nameLabel.bottom
                anchors.left: nameLabel.left
                anchors.margins: 6

                platformStyle: LabelStyle {
                    fontPixelSize: 20
                    textColor: "gray"
                }
            }

            MouseArea {
                id: delegateMouseArea
                anchors.fill: parent
                onClicked: root.connectToIp(model.ip)
            }

            Button {
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.margins: 16
                width: 50
                height: width
                iconSource: "image://theme/icon-m-toolbar-delete"
                onClicked: { deviceDeleteDialog.name = model.name; deviceDeleteDialog.open() }
            }
        }
    }

    DeviceDeleteDialog {
        id: deviceDeleteDialog
        onAccepted: {
            appWindow.devices.removeDevice(deviceDeleteDialog.name)
            deviceDeleteDialog.name = ""
        }
    }
}
